<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div><button class="btn">添加一条访客信息</button></div>
    <div>
        <table border="1">
            <tr>
                <th>序列号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </table>
    </div>
    <script>
        var info = [{
            name: "胡杭",
            age: 16
        }, {
            name: "胜明",
            age: 22
        }, {
            name: "军毅",
            age: 21
        }, {
            name: "晓华",
            age: 13
        }, {
            name: "盛聪",
            age: 23
        }, {
            name: "侦剑",
            age: 32
        }, {
            name: "红翔",
            age: 25
        }, {
            name: "超维",
            age: 18
        }, {
            name: "士琪",
            age: 22
        }, {
            name: "艳华",
            age: 20
        }];
        let btn = document.getElementsByClassName('btn');
        let table = document.querySelector('table');
        let n = 0;
        btn[0].onclick = function(){
            let tr = document.createElement('tr');
            tr.innerHTML = "<td>"+(n+1)+"</td>"+"<td>"+info[n].name+"</td>"+"<td>"+info[n].age+"</td>"+"<td>"+"<button class='btn'>删除</button>"+"</td>";
            n++;
            table.appendChild(tr);
            btn = document.getElementsByClassName('btn');
            console.log(btn);
            for(let i=1;i<btn.length;i++){
                btn[i].onclick=function(){
                    this.parentElement.parentElement.remove();
                }
            }
        }
       
        
    </script>
</body>
</html>